<template>
    <div class="footer">
        <div @click="home" class="item item2" :class="{icon11: footerIndex !== 0}">首页
    </div>
        <div @click="ask" class="item item2" :class="{icon22: footerIndex === 1, icon2: footerIndex !== 1}">趣巢
        </div>
        <router-link to="/Fabu">
        <div class="item item1" >
            <div class="outbox" >
          <span class="open">
          </span>
            </div>
            <p class="commit">发布</p>
        </div>
        </router-link>
        <div @click="msg" class="item item2" :class="{icon44: footerIndex === 3, icon4: footerIndex !== 3}" >
            消息
        </div>

        <div class="item item2" :class="{icon55: footerIndex === 4, icon5: footerIndex !== 4}" @click="my">我的
        </div>
    </div>
</template>
<script>
    import {mapGetters,mapActions} from 'vuex'
    export default {
        data () {
            return {
                footerIndex: '',
                active: true
            }
        },
        computed: mapGetters(['login']),
        methods: {
            msg () {
                this.$router.push({path: '/message'})
            },
            home () {
                this.$router.push({path: '/home'})
            },

            ask(){
                this.$router.push({path: '/ask'})
            },
            my () {
                this.$router.push({path: '/personal'})
            }
        }
    }
</script>
<style lang="css" scoped>
    * {
        margin: 0;
        padding: 0;
    }
    a{
        text-decoration: none;
    }
    .footer{
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        height: 1rem;
        z-index: 999;
        position: fixed;
        bottom: 0;
        width: 100%;
        border-top: 1px solid #f8f8f8;
        background: #fff;
    }
    .footer .recomlist {
        width: 100%;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        margin-top: 15rem;
        transition: all 0.7s ease-in;
    }

    .footer .recomlist .type{
        display: block;
        -webkit-box-flex: 1;
        -ms-flex: 1;
        flex: 1;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
    }
    .footer .recomlist .type .image{
        width: 6rem;
        height: 6rem;
        background-color: #ffda44;
        border-radius: 50%;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
    }
    .footer .recomlist .type .image img {
        width: 3.5rem;
        height: 3.5rem;
        vertical-align: middle;
    }
    .footer .recomlist .type .explain {
        margin-top: 1rem;
        color: #333;
        font-size: 1.2rem;
    }
    .footer .login {
        display: none;
        position: fixed;
        z-index: 100;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: white;
        animation: enter .5s;
    }
    .login.active{
        animation: out 1s;
    }
    @keyframes  enter {
        0% {
            transform: scale(2);
            opactity:0;
        }
        50% {
            transform: scale(1.5);
            opactity:0.5;
        }
        100% {
            transform: scale(1);
            opactity:1;
        }
    }
    @keyframes  out {
        0%{
            transform: scale(1);
        }
        100% {
            transform: scale(0);
            opactity:0;
        }
    }
    .login .footer{
        border-top: none;
    }
    .innerbox {
        background-color: #fff;
        margin:  auto;
        position: relative;
    }
    .innerbox .open {
        width: 5rem;
        height: 5rem;
        display: block;
        margin: .4rem auto;
        background: url('../../../assets/images/my.png') no-repeat;
        -webkit-background-size: 4rem 4rem;
        background-size: 4rem 4rem;
        position: absolute;
        top: -4rem;
        left: -1.5rem;
    }
    .footer .login .head {
        width: 100%;
    }
    .footer .login .head .h2 {
        margin-top: 4.5rem;
        font-size: 1.6rem;
        width: 100%;
        color: #000;
        padding-left: 1.2rem;
        box-sizing: border-box;
    }
    .footer .login .head .navbar {
        margin-top: 2rem;
        width: 100%;
        padding-left: 1.2rem;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
    }
    .footer .login .head .navbar .li {
        margin-right: 1.2rem;
    }
    .footer .login .head .navbar .li .titlename {
        font-size: 1.4rem;
        color: #000;
    }
    .footer .login .head .navbar .li .titlename:after {
        content: '';
        display: inline-block;
        height: 6px;
        width: 6px;
        border-width: 2px 2px 0 0;
        border-color: #ffda44;
        border-style: solid;
        -webkit-transform: rotate(45deg);
        transform: rotate(45deg);
        position: relative;
        margin-left: .2rem;
    }
    .footer .login .head .navbar .li .tip {
        font-size: 1.2rem;
        color: #888;
    }
    .footer .item {
        width: 100%;
        height: 100%;
        color: #888;
        font-size: 15px;
        text-align: center;
        text-decoration: none;
    }
    .footer .item2 {
        line-height: 80px;
    }
    .commit {
        font-size: 15px;
        margin-top: 10px
    }
    .footer .item1 {
        padding-bottom: 0.4rem;
        box-sizing: border-box;
        position: relative;
        display: -webkit-flex;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
    .footer .item .outbox {
        width: 50px;
        height: 50px;
        border-radius: 50%;
        background-color: #fff;
        margin: 0 auto;
        display: block;
        position: relative;
        /*top: -1rem;*/
    }

    .footer .item .outbox .open {
        width: 40px;
        height: 40px;
        display: block;
        border-radius: 50%;
        margin: 0 auto;
        background: #ffda44  no-repeat;
        -webkit-background-size: 2rem 2rem;
        background-size: 2.4rem 2.4rem;
        background-position: 50%  50%;
    }
    .footer .item.icon1 {
        background: url('../../../assets/images/shouye2.png') no-repeat center 25%;
        background-size: 20px;
    }
    .footer .item.icon11 {
        background: url('../../../assets/images/shouye1.png') no-repeat center 25%;
        background-size: 20px;
    }

    .footer .item.icon2 {
        background: url('../../../assets/images/quchao.png') no-repeat center 25%;
        background-size: 20px;
    }
    .footer .item.icon22 {
        background: url('../../../assets/images/quchao.png') no-repeat center 25%;
        background-size: 20px;
    }

    .footer .item.icon4 {
        background: url('../../../assets/images/xiaoxi.png') no-repeat center 25%;
        background-size: 20px;
    }
    .footer .item.icon44 {
        background: url('../../../assets/images/xiaoxi.png') no-repeat center 25%;
        background-size: 20px;
    }
    .footer .item.icon5 {
        background: url('../../../assets/images/my.png') no-repeat center 25%;
        background-size: 20px;
    }
    .footer .item.icon55 {
        background: url('../../../assets/images/my.png') no-repeat center 25%;
        background-size: 20px;
    }
</style>
